<!DOCTYPE html>
<html>
<head>
	<title>Inputs Test</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
	<meta name="apple-mobile-web-app-capable" content="yes">
	<link rel="icon" type="image/png" href="../iui/iui-favicon.png">
	<link rel="apple-touch-startup-image" href="../iui/iui-startup.jpg">
	<link rel="apple-touch-icon" href="../iui/iui-logo-touch-icon-hd.png" />

	<link rel="stylesheet" href="../iui/iui.css" type="text/css" />
	<link rel="stylesheet" href="../iui/t/default/default-theme.css"  type="text/css"/>
	<script type="application/x-javascript" src="../iui/iui.js"></script>
</head>

<body>
    <div class="toolbar">
        <h1 id="pageTitle">Inputs Test</h1>
    </div>
    
    <form title="Radio Button" class="panel" action="text_area.php" method="POST" selected="true">
        <h2>Standard Input Fields</h2>
        <fieldset>
            <div class="row">
                <label>Radio Button</label>
                <input type="radio" name="radio_button_test" />
            </div>            
            <div class="row">
                <label>Check Box</label>
                <input type="checkbox" name="checkbox_test" />
            </div>
			<div class="row form">
				<label>Select</label>
				<select name="select" name="select" size="1">
					<option value="value1">value 1</option>
					<option value="value2">value 2</option>
					<option value="value3">value 3</option>
					<option value="value4">value 4</option>
					<option value="value5">value 5</option>
					<option value="value6">value 6</option>
					<option value="value7">value 7</option>
					<option value="value8">value 8</option>
					<option value="value9">value 9</option>
				</select>
			</div>
            <div class="row">
                <label>Text</label>
                <input type="text" name="text" placeholder="Your text here..." />
            </div>
            <div class="row">
                <label>Password</label>
                <input type="password" name="password" placeholder="Your password here..." />
            </div>
            <div class="row">
                <label>Textarea</label>
                <textarea name="textarea" placeholder="Your text here..."></textarea>
            </div>
        </fieldset>
        
        <h2>Keymaps (supported by iOS 3.x & above)</h2>
        <fieldset>
            <div class="row">
                <label>Email</label>
                <input type="email" name="email" placeholder="Email keymap" />
            </div>
            <div class="row">
                <label>URL</label>
                <input type="url" name="url" placeholder="URL keymap" />
            </div>
            <div class="row">
                <label>Phone</label>
                <input type="tel" name="tel" placeholder="Phone keymap" />
            </div>
            <div class="row">
                <label>Number</label>
                <input type="number" name="number" placeholder="Numbers keymap" />
            </div>
            <div class="row">
                <label>Pattern[0-9]</label>
				<input type="text" pattern="[0-9]*" name="num" placeholder="Only numbers here...">
			</div>
        </fieldset>
        
        <h2>Other inputs</h2>
        <fieldset>
            <div class="row">
            	<label>Toggle</label>
	            <div class="toggle" onclick=""><span class="thumb"></span><span class="toggleOn">ON</span><span class="toggleOff">OFF</span></div>
	        </div>
            <div class="row">
                <label>Date</label>
                <input type="date" name="date" />
            </div>
            <div class="row">
                <label>Color</label>
                <input type="color" name="color" />
            </div>
        </fieldset>
    </form>
</body>
</html>
